<template>
  <div class="survey">
    
    <div class="main_container">
      <!-- 说明 -->
      <Overview/>
      <!-- 导入导出 -->
      <OptTmpl/>

      <!-- 基金信息 -->
      <ComCollapse title="基金信息" :isFilled="true">
        <el-form label-width="170px" label-position="left" style="padding-bottom: 20px;">
          <el-form-item label="排名用机构全称">深圳市创新投资集团有限公司</el-form-item>
          <el-form-item label="排名用机构简称" required>深创投</el-form-item>
          <el-form-item label="是否国资">是</el-form-item>
          <el-form-item label="成立时间">2016-10-12</el-form-item>
          <el-form-item label="机构类型">--</el-form-item>
          <el-form-item label="机构性质">--</el-form-item>
          <el-form-item label="总部地区">--</el-form-item>
          <el-form-item label="机构网址">--</el-form-item>
          <el-form-item label="中国大陆投资主要负责人">--</el-form-item>
          <el-form-item label="负责人职位">总经理</el-form-item>
          <el-form-item label="联系人">刘勇</el-form-item>
          <el-form-item label="联系人职位">总经理</el-form-item>
          <el-form-item label="电话">15012325235</el-form-item>
          <el-form-item label="Email">--</el-form-item>
          <el-form-item label="意向榜单">清科中国股权投资市场2022年度机构有限</el-form-item>
        </el-form>
      </ComCollapse>

      <!-- 基金管理情况 -->
      <ComCollapse title="基金管理情况" :isFilled="true">
        <div class="secondary_title">一、FOFs</div>
        <div class="third_title">1）整体情况</div>
        <el-table :data="tableData1.data" style="width: 100%" class="mb30">
          <el-table-column :prop="item.prop" :label="item.label" :min-width="item.w || 100" v-for="item in tableData1.column" :key="item.prop"></el-table-column>
        </el-table>
        <div class="third_title">2）基金管理情况</div>
        <el-table :data="tableData2.data" style="width: 100%" class="mb30">
          <el-table-column :prop="item.prop" :label="item.label" :min-width="item.w || 100" v-for="item in tableData2.column" :key="item.prop"></el-table-column>
        </el-table>

        <div style="width: calc(100% + 60px);height: 30px;margin-left: -30px;border-top: 1px dashed #EBEDF0;"></div>

        <div class="secondary_title">二、非FOFs形式LP</div>
        <el-table :data="tableData3.data" style="width: 100%;padding-bottom: 10px;">
          <el-table-column :prop="item.prop" :label="item.label" :min-width="item.w || 100" v-for="item in tableData3.column" :key="item.prop"></el-table-column>
        </el-table>
      </ComCollapse>

      <!-- 投资情况 -->
      <ComCollapse title="投资情况" :isFilled="false">
        投资情况
      </ComCollapse>

      <!-- 退出回报水平 -->
      <ComCollapse title="退出回报水平" :isFilled="true">
        <el-table :data="tableData4.data" style="width: 100%" class="mb30">
          <el-table-column :prop="item.prop" :label="item.label" :min-width="item.w || 100" v-for="item in tableData4.column" :key="item.prop"></el-table-column>
        </el-table>
      </ComCollapse>

      <!-- 机构管理团队 -->
      <ComCollapse title="机构管理团队" :isFilled="true">
        <div class="secondary_title" style="margin-bottom: 20px;">一、累计投资子基金情况</div>
          <el-form label-width="190px" label-position="left" style="padding-bottom: 20px;">
            <el-form-item label="机构人员总数">--</el-form-item>
            <el-form-item label="高层管理人数">--</el-form-item>
            <el-form-item label="投资/业务团队人数">--</el-form-item>
            <el-form-item label="中后台人数">--</el-form-item>
            <el-form-item label="2021年以来新入职员工总数">--</el-form-item>
            <el-form-item label="2022年以来高职员工总数">--</el-form-item>
          </el-form>

          <div style="width: calc(100% + 60px);height: 30px;margin-left: -30px;border-top: 1px dashed #EBEDF0;"></div>

          <div class="secondary_title">二、核心人员变动情况</div>
          <el-table :data="tableData5.data" style="width: 100%">
            <el-table-column :prop="item.prop" :label="item.label" :min-width="item.w || 100" v-for="item in tableData5.column" :key="item.prop"></el-table-column>
          </el-table>
      </ComCollapse>

      <!-- 机构管理团队2 -->
      <ComCollapse title="机构管理团队" :isFilled="true">
        <div v-for="(item, i) in answers" :key="i" class="answer_box">
          <div class="secondary_title" style="margin-bottom: 20px;">{{ item.title }}</div>
          <dl class="answer" v-for="(item2, j) in item.children" :key="j">
            <dt>{{ item2.q }}</dt>
            <dd v-for="(item3, k) in item2.answer" :key="k">{{ item3 }}</dd>
          </dl>
        </div>
      </ComCollapse>
    </div>

    <div class="com-card submit">
      <el-checkbox v-model="confirmation">数据确认</el-checkbox>
      <el-button type="primary" size="small">提交</el-button>
    </div>
  </div>
</template>

<script>
import ComCollapse from '@/components/ComCollapse.vue'
import Overview from './components/Overview.vue'
import OptTmpl from './components/OptTmpl.vue'
import BasicInfo from './components/BasicInfo.vue'
import FundInfo from './components/FundInfo.vue'
import InvestInfo from './components/InvestInfo.vue'
import ExitInfo from './components/ExitInfo.vue'
import TeamInfo from './components/TeamInfo.vue'

export default {
  name: "survey",
  components: { ComCollapse, Overview, OptTmpl, BasicInfo, FundInfo, InvestInfo, ExitInfo, TeamInfo },
  data() {
    return {
      tableData: [],
      /**
       * column: 表格列
       * label: 表头文字
       * prop: 对应表格列数据中字段名
       * w: 列最小宽,
       * fixed: 固定列
       */
       tableData1: {
        column: [
          { label: '是否公开', prop: 'prop_1', fixed: true },
          { label: '管理资本币种', prop: 'prop_2' },
          { label: '截至2022年3月31日已投资本规模（亿）', prop: 'prop_3' },
          { label: '截至2022年3月31日机构管理资本量（亿）', prop: 'prop_4' },
          { label: '2021年4月1日-2022年3月31日新增资本规模（亿）', prop: 'prop_5' },
          { label: '截至2022年3月31日可投资本规模（亿）', prop: 'prop_6' },
        ],
        data: [
          { prop_1: '是', prop_2: '人民币', prop_3: '12.00', prop_4: '8.51', prop_5: '12.00', prop_6: '12.00' }
        ]
      },
      tableData2: {
        column: [
          { label: '是否公开', prop: 'prop_1', fixed: true },
          { label: '基金注册名称', prop: 'prop_2' },
          { label: '基金简称', prop: 'prop_3' },
          { label: '基金状态', prop: 'prop_4' },
          { label: '募集完成时间', prop: 'prop_5' },
          { label: '设立时间', prop: 'prop_6' },
          { label: '币种', prop: 'prop_7' },
          { label: '基金目标总规模（亿）', prop: 'prop_8' },
          { label: '可用于中国大陆的资金比例（%）', prop: 'prop_9' },
          { label: '实缴金额（亿）%）', prop: 'prop_10' },
          { label: '已投资金额（亿）%）', prop: 'prop_11' },
        ],
        data: [
          { prop_1: '是', prop_2: '山溪基金', prop_3: '山溪基金', prop_4: '--', prop_5: '2020-10-11', prop_6: '2020-08-11', prop_7: '人民币', prop_8: '8.51', prop_9: '12%', prop_10: '7.51', prop_11: '1.00' }
        ]
      },
      tableData3: {
        column: [
          { label: '是否公开', prop: 'prop_1', fixed: true },
          { label: '名义出资主体', prop: 'prop_2' },
          { label: '币种', prop: 'prop_3' },
          { label: '2021年4月1日-2022年3月31日新增已投资金额（亿）', prop: 'prop_4' },
          { label: '是否有直投业务', prop: 'prop_5' },
          { label: '截至2022年3月31日已投资本规模（亿）', prop: 'prop_6' },
          { label: '截至2022年3月31日可投资本规模（亿）', prop: 'prop_7' },
          { label: '2021年4月1日-2022年3月31日新增资本规模（亿）', prop: 'prop_8' },
        ],
        data: [
          { prop_1: '是', prop_2: '--', prop_3: '人民币', prop_4: '11.23', prop_5: '是', prop_6: '11.23', prop_7: '1.25', prop_8: '1.60' }
        ]
      },
      tableData4: {
        column: [
          { label: '是否公开', prop: 'prop_1', fixed: true },
          { label: '退出币种', prop: 'prop_2' },
          { label: '累计实际退出金额（亿）', prop: 'prop_3' },
          { label: 'IRR（%）', prop: 'prop_4' },
          { label: '基金账面倍数（TVPI）', prop: 'prop_5' },
          { label: '基金已分配收益倍数（DPI）', prop: 'prop_6' },
        ],
        data: [
          { prop_1: '是', prop_2: '人民币', prop_3: '6.11', prop_4: '12%', prop_5: '1.56', prop_6: '1.25' }
        ]
      },
      tableData5: {
        column: [
          { label: '是否公开', prop: 'prop_1', fixed: true },
          { label: '变动类型', prop: 'prop_2' },
          { label: '姓名', prop: 'prop_3' },
          { label: '变动时间', prop: 'prop_4' },
          { label: '现任职位', prop: 'prop_5' },
          { label: '邮箱', prop: 'prop_6' },
          { label: '原单位名称（如适用）', prop: 'prop_7' },
          { label: '原任职位', prop: 'prop_8' },
          { label: '离职后去向（如适用）', prop: 'prop_9' },
        ],
        data: [
          { prop_1: '是', prop_2: '--', prop_3: '--', prop_4: '2020-10-11', prop_5: '--', prop_6: '--', prop_7: '--', prop_8: '--', prop_9: '--' }
        ]
      },
      fileList: [],
      loading_import: false,
      answers: [
        {
          title: 'A. 资金情况',
          children: [
            { q: '1、贵机构目前的可投资本量是否能够满足本', answer: ['B. 不能，正在加紧募资'] },
            { q: '2、2021年我国募资市场显著回暖，贵机构的募资情况是否有所改善？', answer: ['A. 是，原有LP出资加速'] },
            { q: '3.1、以下LP中，贵机构主要资金来源是哪几类LP？', answer: ['A. 政府机构/政府引导基金/国资出资平台等', 'C. 保险资金'] },
            { q: '4、2021年贵机构是否仍存在募资难问题？贵机构认为目前LP募资难现象产生的原因有哪些？', answer: ['2021年机构仍存在募资难问题'] },
          ]
        },
        {
          title: 'B.  投资情况',
          children: [
            { q: '5、以下LP中，贵机构主要资金来源是哪几类LP？', answer: ['A. 早期投资基金', 'B. 成长基金'] },
          ]
        }
      ],
      confirmation: false
    };
  },
  methods: {
    // 文件上传前
    fileBeforeUpload(file) {
      this.loading_import = true
      console.log('file.name: ', file.name);
      console.log('file.size: ', file.size);
      console.log('file.type: ', file.type);
    },
    // 文件上传成功
    fileOnSuccess(response, file, fileList) {
      this.loading_import = false
      console.log('后端返回信息: ', response)
      console.log('当前文件: ', file)
      console.log('文件列表: ', fileList)
    },
    // 文件上传失败
    fileOnError(err, file, fileList) {
      this.loading_import = false
      console.log('失败信息: ', err)
      console.log('当前文件: ', file)
      console.log('文件列表: ', fileList)
    },
  },
  created() {
    
  },
};
</script>

<style lang="scss" scoped>
.survey{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.main_container{
  flex: 1;
  width: 100%;
  margin: 0 auto;
  padding: 0 135px;
  overflow-y: auto;
  .com-card{
    margin-bottom: 20px;
  }
  // 表单类
  .el-form{
    display: flex;
    flex-wrap: wrap;
    :deep(.el-form-item){
      display: inline-flex;
      width: calc(50% - 20px);
      margin-bottom: 0;
      &:nth-child(2n) {
        margin-left: 40px;
      }
      .el-form-item__label{
        line-height: 34px;
        color: #222;
      }
      .el-form-item__content{
        flex: 1;
        line-height: 20px;
        margin-left: 0 !important;
        padding: 7px 0;
        color: #222;
      }
    }
  }
  // 二级标题
  .secondary_title{
    line-height: 22px;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: bold;
    color: #222;
  }
  // 三级标题
  .third_title{
    line-height: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: bold;
  }
  // 问答列表
  .answer_box{
    padding-top: 30px;
    border-bottom: 1px dashed #EBEDF0;
    .answer{
      margin-bottom: 30px;
      dt{
        height: 14px;
        line-height: 14px;
        margin-bottom: 20px;
        font-weight: bold;
      }
      dd{
        line-height: 20px;
      }
    }
    &:nth-child(1){
      padding-top: 0;
    }
    &:nth-last-child(1){
      border-bottom: 0;
    }
  }
  :deep(.el-upload-list) {
    display: none;
  }
}
.submit{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: 60px;
  .el-button{
    width: 124px;
  }
}
</style>
